<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>开灯！关灯！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <style>
        * {
            border: 0;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --hue: 223;
            --bg: hsl(var(--hue), 10%, 10%);
            --fg: hsl(var(--hue), 10%, 90%);
            --primary: hsl(var(--hue), 90%, 50%);
            --primary2: hsl(var(--hue), 90%, 70%);
            --primary2-t: hsla(var(--hue), 90%, 70%, 0);
            --border: hsl(var(--hue), 10%, 30%);
            --border-hover: hsl(var(--hue), 10%, 50%);
            --trans-dur: 0.3s;
            --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
            font-size: calc(14px + (70 - 14) * (100vw - 280px) / (3840 - 280));
        }

        body,
        button {
            color: var(--fg);
            font: 1em/1.5 sans-serif;
            transition: background-color calc(var(--trans-dur) * 0.5) steps(1, end), box-shadow var(--trans-dur) var(--trans-timing), color calc(var(--trans-dur) * 0.5) steps(1, end);
        }

        body {
            background-color: var(--bg);
            display: flex;
            height: 100vh;
        }

        .plugs {
            background-color: transparent;
            border-radius: 0.375em;
            box-shadow: 0 0 0 0.0625em var(--border), 0 0 0 0.25em var(--primary2-t);
            cursor: pointer;
            display: block;
            margin: auto;
            outline: transparent;
            position: relative;
            -webkit-appearance: none;
            appearance: none;
            -webkit-tap-highlight-color: transparent;
        }

        .plugs:hover {
            box-shadow: 0 0 0 0.0625em var(--border-hover), 0 0 0 0.25em var(--primary2-t);
        }

        .plugs:focus-visible {
            box-shadow: 0 0 0 0.0625em var(--primary), 0 0 0 0.25em var(--primary2);
        }

        .plugs__img {
            display: block;
            position: relative;
            top: 0;
            left: 0;
            width: 16em;
            height: auto;
        }

        .plugs__img-left,
        .plugs__img-left-seg,
        .plugs__img-left-head,
        .plugs__img-right,
        .plugs__img-right-seg,
        .plugs__img-right-head,
        .plugs__img-prong,
        .plugs__img-spark-1-x,
        .plugs__img-spark-1-y,
        .plugs__img-spark-2-x,
        .plugs__img-spark-2-y,
        .plugs__img-spark-3-x,
        .plugs__img-spark-3-y {
            animation-duration: calc(var(--trans-dur) * 3);
            animation-timing-function: var(--trans-timing);
        }

        .plugs__img-left-head,
        .plugs__img-right-head {
            transform-origin: 2px 0;
        }

        .plugs__img-left {
            transform: translate(13px, 10px) rotate(0);
        }

        .plugs__img-right {
            transform: translate(57px, 10px) rotate(0);
        }

        .plugs__img-prong {
            stroke-dashoffset: 0;
        }

        .plugs__img-spark-1-x,
        .plugs__img-spark-2-x,
        .plugs__img-spark-3-x {
            animation-timing-function: linear;
        }

        .plugs__img-spark-1-y,
        .plugs__img-spark-2-y,
        .plugs__img-spark-3-y {
            animation-timing-function: cubic-bezier(0.35, 1, 0.65, 1);
        }

        .plugs[aria-pressed='false'] .plugs__img-left {
            animation-name: left-swing-tail-off;
        }

        .plugs[aria-pressed='false'] .plugs__img-left-seg {
            animation-name: left-swing-seg-off;
        }

        .plugs[aria-pressed='false'] .plugs__img-left-seg--flip {
            animation-name: left-swing-seg-off-2;
        }

        .plugs[aria-pressed='false'] .plugs__img-left-head {
            animation-name: left-swing-head-off;
        }

        .plugs[aria-pressed='false'] .plugs__img-right {
            animation-name: right-swing-tail-off;
        }

        .plugs[aria-pressed='false'] .plugs__img-right-seg {
            animation-name: right-swing-seg-off;
        }

        .plugs[aria-pressed='false'] .plugs__img-right-seg--flip {
            animation-name: right-swing-seg-off-2;
        }

        .plugs[aria-pressed='false'] .plugs__img-right-head {
            animation-name: right-swing-head-off;
        }

        .plugs[aria-pressed='false'] .plugs__img-prong {
            animation-name: prongs-off;
            animation-timing-function: cubic-bezier(0.35, 0, 0.65, 0);
        }

        .plugs[aria-pressed='false'] .plugs__img-spark-1-x {
            animation-name: spark-1-x;
        }

        .plugs[aria-pressed='false'] .plugs__img-spark-1-y {
            animation-name: spark-1-y;
        }

        .plugs[aria-pressed='false'] .plugs__img-spark-2-x {
            animation-name: spark-2-x;
        }

        .plugs[aria-pressed='false'] .plugs__img-spark-2-y {
            animation-name: spark-2-y;
        }

        .plugs[aria-pressed='false'] .plugs__img-spark-3-x {
            animation-name: spark-3-x;
        }

        .plugs[aria-pressed='false'] .plugs__img-spark-3-y {
            animation-name: spark-3-y;
        }

        .plugs[aria-pressed='true'] .plugs__img-left {
            animation-name: left-swing-tail-on;
            transform: translate(13px, 10px) rotate(-90deg);
        }

        .plugs[aria-pressed='true'] .plugs__img-left-seg {
            animation-name: left-swing-seg-on;
        }

        .plugs[aria-pressed='true'] .plugs__img-left-seg--flip {
            animation-name: right-swing-seg-on;
        }

        .plugs[aria-pressed='true'] .plugs__img-left-head {
            animation-name: left-swing-head-on;
        }

        .plugs[aria-pressed='true'] .plugs__img-right {
            animation-name: right-swing-tail-on;
            transform: translate(57px, 10px) rotate(90deg);
        }

        .plugs[aria-pressed='true'] .plugs__img-right-seg {
            animation-name: right-swing-seg-on;
        }

        .plugs[aria-pressed='true'] .plugs__img-right-seg--flip {
            animation-name: left-swing-seg-on;
        }

        .plugs[aria-pressed='true'] .plugs__img-right-head {
            animation-name: right-swing-head-on;
        }

        .plugs[aria-pressed='true'] .plugs__img-prong {
            animation-name: prongs-on;
            animation-timing-function: cubic-bezier(0.35, 1, 0.65, 1);
            stroke-dashoffset: 2;
        }

        .plugs__label {
            overflow: hidden;
            position: absolute;
            width: 0;
            height: 0;
        }

        [data-dark='false'] {
            --bg: hsl(var(--hue), 10%, 90%);
            --fg: hsl(var(--hue), 10%, 10%);
            --border: hsl(var(--hue), 10%, 70%);
        }

        [data-dark='false'] body,
        [data-dark='false'] button {
            transition-duration: calc(var(--trans-dur) * 2.25), var(--trans-dur), calc(var(--trans-dur) * 2.25);
        }

        @keyframes prongs-off {
            from {
                stroke-dashoffset: 2;
            }

            17.5%,
            to {
                stroke-dashoffset: 0;
            }
        }

        @keyframes left-swing-tail-off {
            from {
                transform: translate(13px, 10px) rotate(-90deg);
            }

            25% {
                transform: translate(13px, 10px) rotate(-32deg);
            }

            50% {
                transform: translate(13px, 10px) rotate(2deg);
            }

            75% {
                transform: translate(13px, 10px) rotate(-1deg);
            }

            to {
                transform: translate(13px, 10px) rotate(0);
            }
        }

        @keyframes left-swing-seg-off {
            from {
                transform: translate(0, 1px) rotate(0);
            }

            25% {
                transform: translate(0, 1px) rotate(-10deg);
            }

            50% {
                transform: translate(0, 1px) rotate(2deg);
            }

            75% {
                transform: translate(0, 1px) rotate(-1deg);
            }

            to {
                transform: translate(0, 1px) rotate(0);
            }
        }

        @keyframes left-swing-seg-off-2 {
            from {
                transform: translate(0, 1px) rotate(0);
            }

            25% {
                transform: translate(0, 1px) rotate(10deg);
            }

            50% {
                transform: translate(0, 1px) rotate(2deg);
            }

            75% {
                transform: translate(0, 1px) rotate(-1deg);
            }

            to {
                transform: translate(0, 1px) rotate(0);
            }
        }

        @keyframes left-swing-head-off {
            from {
                transform: translate(-2.5px, 1px) rotate(0);
            }

            25% {
                transform: translate(-2.5px, 1px) rotate(-10deg);
            }

            50% {
                transform: translate(-2.5px, 1px) rotate(2deg);
            }

            75% {
                transform: translate(-2.5px, 1px) rotate(-1deg);
            }

            to {
                transform: translate(-2.5px, 1px) rotate(0);
            }
        }

        @keyframes right-swing-tail-off {
            from {
                transform: translate(57px, 10px) rotate(90deg);
            }

            25% {
                transform: translate(57px, 10px) rotate(32deg);
            }

            50% {
                transform: translate(57px, 10px) rotate(-2deg);
            }

            75% {
                transform: translate(57px, 10px) rotate(1deg);
            }

            to {
                transform: translate(57px, 10px) rotate(0);
            }
        }

        @keyframes right-swing-seg-off {
            from {
                transform: translate(0, 1px) rotate(0);
            }

            25% {
                transform: translate(0, 1px) rotate(10deg);
            }

            50% {
                transform: translate(0, 1px) rotate(-2deg);
            }

            75% {
                transform: translate(0, 1px) rotate(1deg);
            }

            to {
                transform: translate(0, 1px) rotate(0);
            }
        }

        @keyframes right-swing-seg-off-2 {
            from {
                transform: translate(0, 1px) rotate(0);
            }

            25% {
                transform: translate(0, 1px) rotate(-10deg);
            }

            50% {
                transform: translate(0, 1px) rotate(-2deg);
            }

            75% {
                transform: translate(0, 1px) rotate(1deg);
            }

            to {
                transform: translate(0, 1px) rotate(0);
            }
        }

        @keyframes right-swing-head-off {
            from {
                transform: translate(-2.5px, 1px) rotate(0);
            }

            25% {
                transform: translate(-2.5px, 1px) rotate(10deg);
            }

            50% {
                transform: translate(-2.5px, 1px) rotate(-2deg);
            }

            75% {
                transform: translate(-2.5px, 1px) rotate(1deg);
            }

            to {
                transform: translate(-2.5px, 1px) rotate(0);
            }
        }

        @keyframes prongs-on {

            from,
            70% {
                stroke-dashoffset: 0;
            }

            90%,
            to {
                stroke-dashoffset: 2;
            }
        }

        @keyframes left-swing-tail-on {
            from {
                transform: translate(13px, 10px) rotate(0);
            }

            50% {
                transform: translate(13px, 10px) rotate(-32deg);
            }

            to {
                transform: translate(13px, 10px) rotate(-90deg);
            }
        }

        @keyframes left-swing-seg-on {
            from {
                transform: translate(0, 1px) rotate(0);
            }

            50% {
                transform: translate(0, 1px) rotate(-10deg);
            }

            to {
                transform: translate(0, 1px) rotate(0);
            }
        }

        @keyframes left-swing-head-on {
            from {
                transform: translate(-2.5px, 1px) rotate(0);
            }

            50% {
                transform: translate(-2.5px, 1px) rotate(-10deg);
            }

            to {
                transform: translate(-2.5px, 1px) rotate(0);
            }
        }

        @keyframes right-swing-tail-on {
            from {
                transform: translate(57px, 10px) rotate(0);
            }

            50% {
                transform: translate(57px, 10px) rotate(32deg);
            }

            to {
                transform: translate(57px, 10px) rotate(90deg);
            }
        }

        @keyframes right-swing-seg-on {
            from {
                transform: translate(0, 1px) rotate(0);
            }

            50% {
                transform: translate(0, 1px) rotate(10deg);
            }

            to {
                transform: translate(0, 1px) rotate(0);
            }
        }

        @keyframes right-swing-head-on {
            from {
                transform: translate(-2.5px, 1px) rotate(0);
            }

            50% {
                transform: translate(-2.5px, 1px) rotate(10deg);
            }

            to {
                transform: translate(-2.5px, 1px) rotate(0);
            }
        }

        @keyframes spark-1-x {

            from,
            12.5% {
                r: 1px;
                transform: translate(0, 0);
            }

            37.5%,
            to {
                r: 0;
                transform: translate(-10px, 0);
            }
        }

        @keyframes spark-1-y {
            from {
                animation-timing-function: steps(1, end);
                transform: translate(0, 0);
                visibility: hidden;
            }

            12.5% {
                animation-timing-function: linear;
                transform: translate(0, 0);
                visibility: visible;
            }

            37.5%,
            to {
                transform: translate(0, -9px);
            }
        }

        @keyframes spark-2-x {

            from,
            12.5% {
                r: 1px;
                transform: translate(0, 0);
            }

            37.5%,
            to {
                r: 0;
                transform: translate(4px, 0);
            }
        }

        @keyframes spark-2-y {
            from {
                animation-timing-function: steps(1, end);
                transform: translate(0, 0);
                visibility: hidden;
            }

            12.5% {
                animation-timing-function: linear;
                transform: translate(0, 0);
                visibility: visible;
            }

            37.5%,
            to {
                transform: translate(0, -8px);
            }
        }

        @keyframes spark-3-x {

            from,
            12.5% {
                r: 1px;
                transform: translate(0, 0);
            }

            37.5%,
            to {
                r: 0;
                transform: translate(-1px, 0);
            }
        }

        @keyframes spark-3-y {
            from {
                animation-timing-function: steps(1, end);
                transform: translate(0, 0);
                visibility: hidden;
            }

            12.5% {
                animation-timing-function: linear;
                transform: translate(0, 0);
                visibility: visible;
            }

            37.5%,
            to {
                transform: translate(0, 8px);
            }
        }
    </style>
</head>

<body>
    <button class="plugs" type="button"><svg class="plugs__img" viewBox="0 0 70 35" width="700px" height="350px"
            aria-hidden="true">
            <g fill="none" stroke="currentcolor" stroke-linecap="round" stroke-width="1">
                <g class="plugs__img-left" transform="translate(13,10)">
                    <polyline points="0 0,0 1" />
                    <g class="plugs__img-left-seg" transform="translate(0,1)">
                        <polyline points="0 0,0 1" />
                        <g class="plugs__img-left-seg" transform="translate(0,1)">
                            <polyline points="0 0,0 1" />
                            <g class="plugs__img-left-seg" transform="translate(0,1)">
                                <polyline points="0 0,0 1" />
                                <g class="plugs__img-left-seg" transform="translate(0,1)">
                                    <polyline points="0 0,0 1" />
                                    <g class="plugs__img-left-seg" transform="translate(0,1)">
                                        <polyline points="0 0,0 1" />
                                        <g class="plugs__img-left-seg" transform="translate(0,1)">
                                            <polyline points="0 0,0 1" />
                                            <g class="plugs__img-left-seg" transform="translate(0,1)">
                                                <polyline points="0 0,0 1" />
                                                <g class="plugs__img-left-seg" transform="translate(0,1)">
                                                    <polyline points="0 0,0 1" />
                                                    <g class="plugs__img-left-seg" transform="translate(0,1)">
                                                        <polyline points="0 0,0 1" />
                                                        <g class="plugs__img-left-seg" transform="translate(0,1)">
                                                            <polyline points="0 0,0 1" />
                                                            <g class="plugs__img-left-seg plugs__img-left-seg--flip"
                                                                transform="translate(0,1)">
                                                                <polyline points="0 0,0 1" />
                                                                <g class="plugs__img-left-seg plugs__img-left-seg--flip"
                                                                    transform="translate(0,1)">
                                                                    <polyline points="0 0,0 1" />
                                                                    <g class="plugs__img-left-seg plugs__img-left-seg--flip"
                                                                        transform="translate(0,1)">
                                                                        <polyline points="0 0,0 1" />
                                                                        <g class="plugs__img-left-seg plugs__img-left-seg--flip"
                                                                            transform="translate(0,1)">
                                                                            <polyline points="0 0,0 1" />
                                                                            <g class="plugs__img-left-seg plugs__img-left-seg--flip"
                                                                                transform="translate(0,1)">
                                                                                <polyline points="0 0,0 1" />
                                                                                <g class="plugs__img-left-head"
                                                                                    transform="translate(-2.5,1)">
                                                                                    <rect rx="1" ry="1" x="0" y="0"
                                                                                        width="5" height="6" />
                                                                                    <polyline class="plugs__img-prong"
                                                                                        points="1 6,1 8"
                                                                                        stroke-dasharray="2 2" />
                                                                                    <polyline class="plugs__img-prong"
                                                                                        points="4 6,4 8"
                                                                                        stroke-dasharray="2 2" />
                                                                                </g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
                <g class="plugs__img-right" transform="translate(57,10)">
                    <polyline points="0 0,0 1" />
                    <g class="plugs__img-right-seg" transform="translate(0,1)">
                        <polyline points="0 0,0 1" />
                        <g class="plugs__img-right-seg" transform="translate(0,1)">
                            <polyline points="0 0,0 1" />
                            <g class="plugs__img-right-seg" transform="translate(0,1)">
                                <polyline points="0 0,0 1" />
                                <g class="plugs__img-right-seg" transform="translate(0,1)">
                                    <polyline points="0 0,0 1" />
                                    <g class="plugs__img-right-seg" transform="translate(0,1)">
                                        <polyline points="0 0,0 1" />
                                        <g class="plugs__img-right-seg" transform="translate(0,1)">
                                            <polyline points="0 0,0 1" />
                                            <g class="plugs__img-right-seg" transform="translate(0,1)">
                                                <polyline points="0 0,0 1" />
                                                <g class="plugs__img-right-seg" transform="translate(0,1)">
                                                    <polyline points="0 0,0 1" />
                                                    <g class="plugs__img-right-seg" transform="translate(0,1)">
                                                        <polyline points="0 0,0 1" />
                                                        <g class="plugs__img-right-seg" transform="translate(0,1)">
                                                            <polyline points="0 0,0 1" />
                                                            <g class="plugs__img-right-seg plugs__img-right-seg--flip"
                                                                transform="translate(0,1)">
                                                                <polyline points="0 0,0 1" />
                                                                <g class="plugs__img-right-seg plugs__img-right-seg--flip"
                                                                    transform="translate(0,1)">
                                                                    <polyline points="0 0,0 1" />
                                                                    <g class="plugs__img-right-seg plugs__img-right-seg--flip"
                                                                        transform="translate(0,1)">
                                                                        <polyline points="0 0,0 1" />
                                                                        <g class="plugs__img-right-seg plugs__img-right-seg--flip"
                                                                            transform="translate(0,1)">
                                                                            <polyline points="0 0,0 1" />
                                                                            <g class="plugs__img-right-seg plugs__img-right-seg--flip"
                                                                                transform="translate(0,1)">
                                                                                <polyline points="0 0,0 1" />
                                                                                <g class="plugs__img-right-head"
                                                                                    transform="translate(-2.5,1)">
                                                                                    <rect rx="1" ry="1" x="0" y="0"
                                                                                        width="5" height="6" />
                                                                                </g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
            <g fill="currentcolor" transform="translate(35,10)">
                <g class="plugs__img-spark-1-y">
                    <circle class="plugs__img-spark-1-x" r="0" cy="-1" />
                </g>
                <g class="plugs__img-spark-2-y">
                    <circle class="plugs__img-spark-2-x" r="0" cy="0" />
                </g>
                <g class="plugs__img-spark-3-y">
                    <circle class="plugs__img-spark-3-x" r="0" cy="1" />
                </g>
            </g>
        </svg><span class="plugs__label">Power</span></button>
    <script>'use strict'; window.addEventListener('DOMContentLoaded', () => { const plugs = new Plugs('button') }); class Plugs { constructor(buttonEl) { var _a; this.button = document.querySelector(buttonEl); (_a = this.button) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.toggleTheme.bind(this)) } toggleTheme() { var _a, _b; const pressed = ((_a = this.button) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-pressed')) === 'true'; (_b = this.button) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-pressed', `${!pressed}`); document.documentElement.setAttribute('data-dark', `${pressed}`) } }</script>
</body>

</html>